<template>
	<view>
		<Navbar :isReturn="true"></Navbar>
		<u-tabs-swiper ref="tabs" active-color="#B3723E" bg-color="transparent" :is-scroll="false" :current="current" :list="tabList" @change="tabChange"></u-tabs-swiper>
		<view class="u-m-30">
			<AdvItem :list="list" :type="current + 1" @onAdvertCxd="onAdvertCxd"></AdvItem>
		</view>
		<Loadmore :status="status"></Loadmore>
		<view style="height: 200rpx;"></view>
		<Bottom :btnText="'宣传推广'" @confirm="onAdvertAdd"></Bottom>
		
		<!-- 续费弹出框 -->
		<u-modal v-model="pointData.show" :mask-close-able="false" @confirm="onAdvertReNew" title="请选择投放积分" confirm-color="#fb6316" :show-cancel-button="true">
			<view class="u-m-28">
				<view class="u-flex u-m-b-20">
					<text>当前积分：</text>
					<text class=" u-font-30 u-font-bold u-color-puce">{{userPoint}}</text>
				</view>
				<view class="u-flex u-flex-wrap">
					<view class="u-m-r-28 u-m-b-20" v-for="item in pointData.list" :key="item.value">
						<u-tag :text="item.value" @click="onChoosePoint(item)" type="warning" :mode="item.check ? 'dark' : 'plain'" />
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Loadmore from '@/components/Loadmore.vue'
	import Bottom from '@/components/Bottom.vue'
	import AdvItem from '../components/AdvItem.vue'
	import reachBottom from '@/mixins/reachBottom.js'
	import { userAdvertList, advertRenew, advertStandard, userInfo } from '@/network/api.js'
	export default {
		mixins: [reachBottom],
		components:{
			Navbar,
			Bottom,
			Loadmore,
			AdvItem
		},
		data(){
			return{
				current: 0,
				tabList:[{name:'正在投放'},{name:'已完成'},{name:'已拒绝'}],
				status: 'loadmore',
				list:[],
				pointData: {
					id: '',
					num: 0,
					list: [],
					show: false
				},
				userPoint: 0
			}
		},
		onLoad(){
			this.onGetAdvertList()
			this.onGetAdvertPost()
		},
		mounted(){
			let _this = this
			uni.$on('update',function(){
				_this.page = 1
				_this.list = []
				_this.status = 'loadmore'
				_this.onGetAdvertList()
			})
		},
		onUnload() {
			uni.$off('update')
			this.stickyStyle = ''
		},
		methods: {
			tabChange(val){
				this.current = val
				this.page = 1
				this.list = []
				this.status = 'loadmore'
				this.onGetAdvertList()
			},
			async onGetAdvertList(){
				const params = {
					user_id: uni.getStorageSync("user_id"),
					type: this.current + 1,
					page: this.page,
					limit: this.pageSize
				}
				const res = await userAdvertList(params)
				if(res.data.list.length > 0){
					res.data.list.map(item=>{
						this.list.push(item)
					})
				}
				if(res.data.list.length < 10) this.status = 'nomore'
			},
			async onGetAdvertPost() {
				const res = await advertStandard()
				res.data.list.map((item,index)=>{
					if(index == 0){
						item.check = true
						this.pointData.num = item.key
					}else{
						item.check = false
					}
				})
				this.pointData.list = res.data.list
			},
			onAdvertAdd(){
				uni.navigateTo({
					url: "/operate/advertAdd/advertAdd"
				})
			},
			onAdvertCxd(val){
				this.pointData.id = val
				userInfo({user_id:uni.getStorageSync("user_id")}).then(res=>{
					this.userPoint = res.data.integral
					this.pointData.show = true
				})
			},
			onChoosePoint(val){
				this.pointData.list.map(item=>item.check = false)
				val.check = true
				this.pointData.num = val.key
			},
			onAdvertReNew(){
				const params = {
					user_id: uni.getStorageSync("user_id"),
					advert_id: this.pointData.id,
					num: this.pointData.num
				}
				advertRenew(params).then(res=>{
					this.page = 1
					this.status = 'loadmore'
					this.list = []
					this.onGetAdvertList()
				})
			},
			loadData() {
				if(this.status == 'nomore') return
				this.page++
				this.status = 'loading'
				this.onGetAdvertList()
			}
		}
	}
</script>

<style>
</style>